import React, { useState } from 'react';
import { Table, Divider, Input, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useSelector } from 'umi';

import '../../models/accountPassword';

interface DataType {
  key: React.Key;
  account: string;
  password: string;
}
interface ItemO {
  key: number;
  username: string;
  password: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: '序号',
    dataIndex: 'key',
  },
  {
    title: '账号',
    dataIndex: 'username',
  },
  {
    title: '密码',
    dataIndex: 'password',
  },
];

const AccountPassword: React.FC = () => {
  const dataList = useSelector((state: any) => state.AccountPassword.account);

  let [list, setList] = useState<any | never>([]);
  let [value, setValue] = useState<any | never>([]);

  const searchAccount = () => {
    if (value) {
      let changeList = dataList.find((item: ItemO) => {
        return item.username === value;
      });
      console.log(changeList);
      if (changeList) {
        let oList = [];
        oList.push(changeList);
        setList(oList);
      }
    }
  };

  return (
    <>
      <Input placeholder="请输入您的账号以便查询" onChange={(e) => setValue(e.target.value)} />
      <Button onClick={searchAccount}>查询</Button>
      <Divider>账号及密码管理</Divider>
      <Table columns={columns} dataSource={list} size="middle" pagination={false} />
    </>
  );
};

export default AccountPassword;
